<template>
    <form @submit.stop.prevent="handleSearch('search-input')" class="filter-type search-box">
        <p> <a-input v-model:value="searchText" placeholder="输入关键词" @change="changeInput" allow-clear /></p>
        <a-upload v-model:file-list="fileList" accept="image/*" :showUploadList="false" :headers="headers"
            :customRequest="searchImgVideo">
            <img src="../assets/img/photo-icon.png" class="photo-icon" />

            <img v-if="searchImage" class="img-thumbnail" :src="searchImage">
        </a-upload>
        <div class="icon-box" @click="handleSearch('search-input')">
            <!-- <a-upload
                v-model:file-list="fileList"
                accept="video/*"
                :showUploadList="false"
                :headers="headers"
                :customRequest="searchImgVideo"
            >
                <img src="../assets/img/video-icon.png" class="video-icon" />
            </a-upload> -->
            <img src="../assets/img/search-icon.png" class="search-icon" />
        </div>
    </form>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
// import { getVideoFrameByTime } from "@ms/components/src/utils/videoFrame";
import { search } from '@/utils/mediaApi';
import { message } from "ant-design-vue";
import { useDemoStore } from "@/store/toBack";
const backStore = useDemoStore();
interface Props {
    mainType: number,
    ifCompanyAndOrgGroup?: number,
    uperId?: number,
    ifHadBuy?: number,
    aiAnalysisStatus?: number,
    ifChildMediaResource?: number,
    ifConfirmRight?: number,
    listType?: number,
    columns?: number,
    start?: string,
    end?: string,
    ifTimeDesc?: Boolean,
    lastId?: any,
    status?: number,
    searchFlag?: number,
    folder_id?: string,
    ifDesc?: Boolean,
    goodsStatus?: string, // 后端还不支持这个条件 2024/3/26 11:37

};

const searchText = ref<string>('');
const searchImage = ref<string | ArrayBuffer>('');
const headers = { authorization: 'authorization-text' };
const fileList = ref<any[]>([]);

const props = defineProps<Props>();

const emit = defineEmits(['searchList', 'textContent', 'changeLastId']);

const changeInput = (data: any) => {
    if (!searchText.value) {
        searchImage.value = '';
    }
    searchText.value = data.target.value;
    backStore.searchObj.text = data.target.value;
    emit('textContent', data.target.value);
}

const handleSearch = (target?: string | undefined) => {
    // if (searchText.value === '') {
    //     message.error('请输入搜索内容！');
    //     return;
    // }
    console.log("propspropspropsprops")
console.log(props)
    let req = {
        query_text: searchText.value,
        query_type: 0,
        ...props,
        lastId: 0
    };
    if (props.searchFlag == 98 || props.searchFlag == 97) {
        req.lastId = props.lastId;
    }
    if (target == 'search-input') {
        req.lastId = 0;
        emit('changeLastId', req.lastId);
    }
    if (searchText.value.trim() == '') {
        return;
    }
    if(typeof req['columns']=="object"){
        req['columns'] =  req['columns'].value || ""
    }
    req['columns'] = !req['columns'] ? [] : req['columns'].split(',');
    search(req).then(res => {
        emit('searchList', res.data.result.data);
    }).catch(err => console.log(err));
}


const searchImgVideo = async (file: any) => {
    const type = file.file.type.indexOf('image');
    // 视频搜索
    if (type === -1) {
        const thumbnails = await getVideoFrameByTime(file.file, 3, false, 'search', 600);
        let req = {
            query_img: thumbnails.imgUrl,
            query_type: 0,
            ...props,
            lastId: 0
        };
        if (props.searchFlag == 98 || props.searchFlag == 97) {
            req.lastId = props.lastId;
        }
        if(typeof req['columns']=="object"){
            req['columns'] =  req['columns'].value || ""
        }
        req['columns'] = !req['columns'] ? [] : req['columns'].split(',');
        if (thumbnails) {
            search(req).then(res => {
                console.log(res);
                emit('searchList', res.data.result.data);
            }).catch(err => console.log(err));
        }
    } else {
        const reader = new FileReader();
        reader.readAsDataURL(file.file);
        reader.onload = (e) => {
            if (e.target && e.target.result) {
                searchImage.value = e.target.result;
                searchText.value = ' ';
                let req = {
                    query_img: e.target.result,
                    query_type: 0,
                    ...props,
                    lastId: 0
                };
                if (props.searchFlag == 98 || props.searchFlag == 97) {
                    req.lastId = props.lastId;
                }
                if(typeof req['columns']=="object"){
                    req['columns'] =  req['columns'].value || ""
                }
                req['columns'] = !req['columns'] ? [] : req['columns'].split(',');
                search(req).then(res => {
                    console.log(res);
                    emit('searchList', res.data.result.data);
                    emit('textContent', searchImage.value);
                }).catch(err => console.log(err));
            }
        }
    }
}
const clearInput = ()=>{
        searchText.value = ""
    }
watch(
    () => props.searchFlag,
    (val) => {
        if (fileList.value && fileList.value.length > 0) {
            if (!props.searchFlag) return;
            search({
                query_img: searchImage.value,
                query_type: 0,
                ...props
            }).then(res => {
                emit('searchList', res.data.result.data);
                emit('textContent', searchImage.value);
            }).catch(err => console.log(err));
        } else {
            if (!props.searchFlag) return;
            else if (props.searchFlag == 98 || props.searchFlag == 97) {
                handleSearch();
            } else if (props.searchFlag == 99 || props.searchFlag == 100) {
                searchText.value = '';
                emit('textContent', searchText.value);
            } else if (props.searchFlag == 101 || props.searchFlag == 102) {
                searchText.value = '';
                emit('textContent', searchText.value);
            } else if (props.searchFlag == 9527) {
                // 搜索返回状态
                searchText.value = backStore.searchObj.text;
                handleSearch();
            } else {
                handleSearch();
            }
        }
    },
    {
        immediate: true,
        deep: true
    }
);
// watch(() => props,(val) => {
//     searchText.value ='';
//     },
//    {
//     immediate: true,
//     deep: true
//    }
// );
defineExpose({
    clearInput
})
</script>
<style lang="scss" scoped>
.search-box {
    // line-height: 32px;
    position: relative;
    width: 300px;
    height: 32px;
    border: 1px solid #e5e5e5;
    outline: none;
    border-radius: 6px;
    overflow: hidden;
    position: relative;

    p {
        width: 75%;
        text-indent: 6px;
        height: 100%;

        .ant-input-affix-wrapper {
            height: 100%;
            width: 100%;
            border: 0;

            &:hover {
                border: 0;
                border-inline-end-width: 0;
            }

            &.ant-input-affix-wrapper-focused {
                box-shadow: none;
            }
        }
    }

    .photo-icon {
        position: absolute;
        top: 50%;
        left: 80%;
        transform: translate(0, -50%);
        z-index: 100;
    }

    .img-thumbnail {
        width: 46px;
        height: 24px;
        position: absolute;
        top: 3px;
        left: 8px;
        z-index: 101;
    }

    .icon-box {
        position: absolute;
        right: 0;
        top: 0;
        background: #f9601d;
        height: 100%;
        width: 32px;

        .search-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    }
}
</style>

